import { ChangeEvent, FC, useEffect, useRef } from 'react';
import { Button, Flex, Form, Input, Image, ConfigProvider, notification } from 'antd';
import { useTranslation } from 'react-i18next';
import { useRecoilState } from 'recoil';
import { RootProivder, RootState, ConfigState, ConfigProvider as ConfigPageProvider } from '../../../hooks/root/atom';
import { XinyuanState, xinyuanProvider } from '../../../hooks/home/atom';
import { postXinyuan } from '../../../hooks/home/api';

import Panda from './panda';

import Img_1 from '../../../assets/home/img-1.png';

import style from './home.module.scss';
import "./home.style.scss";

const Afflatus: FC = () => {
    const [{ scale = '1' }] = useRecoilState<RootState>(RootProivder);
    const [_, setXinyuan] = useRecoilState<XinyuanState>(xinyuanProvider);
    const [config, setConfig] = useRecoilState<ConfigState>(ConfigPageProvider)
    const [api, contextHolder] = notification.useNotification()
    const [form] = Form.useForm();
    const afflatus = useRef(null);
    const [t] = useTranslation('translation', {
        keyPrefix: 'home'
    });
    const [error] = useTranslation('translation', {
        keyPrefix: 'error'
    });
    const panda = new Panda();
    useEffect(() => {
        afflatus.current && panda.init(afflatus, scale)
        form && form.resetFields()
    }, []);
    const niming = (bool = true) => {
        form.validateFields().then((res) => {
            if (bool) {
                postXinyuan(res)
            } else {
                setXinyuan(res)
                setConfig({
                    ...config,
                    isAuth: true
                })
            }
        }).catch(() => {
            api.error({
                message: error("hint"),
                description: error("error.form"),
                placement: "topRight",
                showProgress: true,
                pauseOnHover: true
            })
        })
    };
    const tijiao = () => {
        niming(false)
    };
    
    return (<ConfigProvider theme={{
        token: {
            colorBgContainer: "rgba(255, 255, 255, 0.3)"
        }
    }}>
        {contextHolder}
        <Flex vertical={true} className={style.afflatus} align='center'>
            <Flex className={`${style.afflatus_h3} ${style.afflatus_hb}`} justify='center'>{t('afflatus.title')}</Flex>
            <Flex className={style.afflatus_form} justify='space-between'>
                <Flex className={`relative ${style.banner_list} ${style.afflatus_canvas}`}>
                    <Image src={Img_1} width="700rem" height="750rem" preview={false} />
                </Flex>
                <Flex className={`relative ${style.banner_list}`}>
                    <Form form={form} className={`${style.form} form`} layout='vertical' requiredMark={false}>
                        <Form.Item label={t('form.name')} name="title" validateDebounce={1000} rules={[
                            { required: true },
                            { min: 4, max: 200, message: "标题大于4个字符小于等于200字符" }
                            ]}>
                            <Input placeholder={t('form.nameStr')} maxLength={200} className={style.form_inp} />
                        </Form.Item>
                        <Form.Item label={t('form.des')} name="content" validateDebounce={1000} rules={[
                            { required: true },
                            { min: 20, max: 1200, message: "内容大于等于20个字符小于等于800字符" }
                            ]}>
                            <Input.TextArea placeholder={t('form.desStr')} className="form_area" autoSize={{
                                minRows: 9
                            }} maxLength={1200} showCount={true} />
                        </Form.Item>
                        <Form.Item noStyle>
                            <Flex justify='space-between' gap={'60rem'}>
                                <Button className={style.form_sub} type='primary' onClick={() => niming(true)}>{t('form.anonymity')}</Button>
                                <Button className={style.form_sub} type='primary' onClick={tijiao}>{t('form.autonym')}</Button>
                            </Flex>
                        </Form.Item>
                    </Form>
                </Flex>
            </Flex>
        </Flex>
    </ConfigProvider>)
}

export default Afflatus